React Server Actions: Ein umfassender Leitfaden zur Formularverarbeitung und Server-Integration

            // app/actions.js
'use server'

import { cookies } from 'next/headers'
import { revalidatePath } from 'next/cache'

export async function createPost(formData) {
  const title = formData.get('title')
  const content = formData.get('content')

  // Datenbankeinfügung simulieren
  await new Promise((resolve) => setTimeout(resolve, 1000))

  console.log('Post created:', { title, content })

  // Die Blog-Route neu validieren
  revalidatePath('/blog')

  return { message: 'Post created successfully!' }
}

            

              
                Copy
              
            
          

            // app/components/PostForm.js
import { createPost } from '../actions'
'use client'

import { useFormStatus } from 'react-dom'

function SubmitButton() {
  const { pending } = useFormStatus()

  return (
    
      {pending ? 'Creating...' : 'Create Post'}
    
  )
}

export default function PostForm() {
  return (
    

      Title:
      

      Content:
      
      <SubmitButton />
    </form>
  )
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2NvbXBvbmVudHMvUG9zdEZvcm0uanMKaW1wb3J0IHsgY3JlYXRlUG9zdCB9IGZyb20gJy4uL2FjdGlvbnMnCid1c2UgY2xpZW50JwoKaW1wb3J0IHsgdXNlRm9ybVN0YXR1cyB9IGZyb20gJ3JlYWN0LWRvbScKCmZ1bmN0aW9uIFN1Ym1pdEJ1dHRvbigpIHsKICBjb25zdCB7IHBlbmRpbmcgfSA9IHVzZUZvcm1TdGF0dXMoKQoKICByZXR1cm4gKAogICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiIGRpc2FibGVkPXtwZW5kaW5nfT4KICAgICAge3BlbmRpbmcgPyAnQ3JlYXRpbmcuLi4nIDogJ0NyZWF0ZSBQb3N0J30KICAgIDwvYnV0dG9uPgogICkKfQoKZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gUG9zdEZvcm0oKSB7CiAgcmV0dXJuICgKICAgIDxmb3JtIGFjdGlvbj17Y3JlYXRlUG9zdH0+CiAgICAgIDxsYWJlbCBodG1sRm9yPSJ0aXRsZSI+VGl0bGU6PC9sYWJlbD4KICAgICAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJ0aXRsZSIgbmFtZT0idGl0bGUiIHJlcXVpcmVkIC8+CgogICAgICA8bGFiZWwgaHRtbEZvcj0iY29udGVudCI+Q29udGVudDo8L2xhYmVsPgogICAgICA8dGV4dGFyZWEgaWQ9ImNvbnRlbnQiIG5hbWU9ImNvbnRlbnQiIHJlcXVpcmVkIC8+CgogICAgICA8U3VibWl0QnV0dG9uIC8+CiAgICA8L2Zvcm0+CiAgKQp9Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>In diesem Beispiel:</p>

<ul>
  <li>Die <code>createPost</code>-Aktion wird aus der <code>../actions</code>-Datei importiert.</li>
  <li>Die <code>action</code>-Prop des <code><form></code>-Elements wird auf die <code>createPost</code>-Funktion gesetzt.</li>
  <li>Die <code>SubmitButton</code>-Komponente verwendet den <code>useFormStatus</code>-Hook, um festzustellen, ob das Formular gerade übermittelt wird. Sie deaktiviert den Button, während das Formular übermittelt wird, um mehrfache Übermittlungen zu verhindern.</li>
</ul>

<h3>Umgang mit Formulardaten</h3>

<p>Server Actions erhalten Formulardaten automatisch als <code>FormData</code>-Objekt. Sie können auf die Daten mit der <code>get</code>-Methode des <code>FormData</code>-Objekts zugreifen. Hier ist ein Beispiel:</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/actions.js
'use server'

export async function createPost(formData) {
  const title = formData.get('title')
  const content = formData.get('content')

  // ...
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2FjdGlvbnMuanMKJ3VzZSBzZXJ2ZXInCgpleHBvcnQgYXN5bmMgZnVuY3Rpb24gY3JlYXRlUG9zdChmb3JtRGF0YSkgewogIGNvbnN0IHRpdGxlID0gZm9ybURhdGEuZ2V0KCd0aXRsZScpCiAgY29uc3QgY29udGVudCA9IGZvcm1EYXRhLmdldCgnY29udGVudCcpCgogIC8vIC4uLgp9Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>In diesem Beispiel werden <code>title</code> und <code>content</code> mit der <code>get</code>-Methode aus dem <code>formData</code>-Objekt extrahiert.</p>

<h3>Feedback für den Benutzer bereitstellen</h3>

<p>Sie können dem Benutzer Feedback geben, indem Sie einen Wert von der Server Action zurückgeben. Dieser Wert steht der Komponente zur Verfügung, die die Aktion aufgerufen hat. Sie können diesen Wert verwenden, um dem Benutzer Erfolgs- oder Fehlermeldungen anzuzeigen. Hier ist ein Beispiel:</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/actions.js
'use server'

export async function createPost(formData) {
  // ...

  return { message: 'Post created successfully!' }
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2FjdGlvbnMuanMKJ3VzZSBzZXJ2ZXInCgpleHBvcnQgYXN5bmMgZnVuY3Rpb24gY3JlYXRlUG9zdChmb3JtRGF0YSkgewogIC8vIC4uLgoKICByZXR1cm4geyBtZXNzYWdlOiAnUG9zdCBjcmVhdGVkIHN1Y2Nlc3NmdWxseSEnIH0KfQo="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/components/PostForm.js
'use client'

import { useState } from 'react'
import { createPost } from '../actions'

export default function PostForm() {
  const [message, setMessage] = useState(null)

  async function handleSubmit(formData) {
    const result = await createPost(formData)
    setMessage(result.message)
  }

  return (
    <div>
      <form action={handleSubmit}>
        {/* ... */}
      </form>
      {message && <p>{message}</p>}
    </div>
  )
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2NvbXBvbmVudHMvUG9zdEZvcm0uanMKJ3VzZSBjbGllbnQnCgppbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JwppbXBvcnQgeyBjcmVhdGVQb3N0IH0gZnJvbSAnLi4vYWN0aW9ucycKCmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIFBvc3RGb3JtKCkgewogIGNvbnN0IFttZXNzYWdlLCBzZXRNZXNzYWdlXSA9IHVzZVN0YXRlKG51bGwpCgogIGFzeW5jIGZ1bmN0aW9uIGhhbmRsZVN1Ym1pdChmb3JtRGF0YSkgewogICAgY29uc3QgcmVzdWx0ID0gYXdhaXQgY3JlYXRlUG9zdChmb3JtRGF0YSkKICAgIHNldE1lc3NhZ2UocmVzdWx0Lm1lc3NhZ2UpCiAgfQoKICByZXR1cm4gKAogICAgPGRpdj4KICAgICAgPGZvcm0gYWN0aW9uPXtoYW5kbGVTdWJtaXR9PgogICAgICAgIHsvKiAuLi4gKi99CiAgICAgIDwvZm9ybT4KICAgICAge21lc3NhZ2UgJiYgPHA+e21lc3NhZ2V9PC9wPn0KICAgIDwvZGl2PgogICkKfQo="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>In diesem Beispiel:</p>

<ul>
  <li>Die <code>createPost</code>-Aktion gibt ein Objekt mit einer <code>message</code>-Eigenschaft zurück.</li>
  <li>Die <code>PostForm</code>-Komponente verwendet den <code>useState</code>-Hook, um die Nachricht zu speichern.</li>
  <li>Die <code>handleSubmit</code>-Funktion ruft die <code>createPost</code>-Aktion auf und setzt den Nachrichten-Zustand auf den von der Aktion zurückgegebenen Wert.</li>
  <li>Die Nachricht wird dem Benutzer in einem <code><p></code>-Element angezeigt.</li>
</ul>

<h3>Fehlerbehandlung</h3>

<p>Server Actions können Fehler auslösen, die von der React-Laufzeitumgebung abgefangen werden. Sie können diese Fehler in Ihren Komponenten mit einem <code>try...catch</code>-Block behandeln. Hier ist ein Beispiel:</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/actions.js
'use server'

export async function createPost(formData) {
  // ...

  if (!title || title.length < 5) {
    throw new Error('Title must be at least 5 characters long.')
  }

  return { message: 'Post created successfully!' }
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2FjdGlvbnMuanMKJ3VzZSBzZXJ2ZXInCgpleHBvcnQgYXN5bmMgZnVuY3Rpb24gY3JlYXRlUG9zdChmb3JtRGF0YSkgewogIC8vIC4uLgoKICBpZiAoIXRpdGxlIHx8IHRpdGxlLmxlbmd0aCA8IDUpIHsKICAgIHRocm93IG5ldyBFcnJvcignVGl0bGUgbXVzdCBiZSBhdCBsZWFzdCA1IGNoYXJhY3RlcnMgbG9uZy4nKQogIH0KCiAgcmV0dXJuIHsgbWVzc2FnZTogJ1Bvc3QgY3JlYXRlZCBzdWNjZXNzZnVsbHkhJyB9Cn0K"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/components/PostForm.js
'use client'

import { useState } from 'react'
import { createPost } from '../actions'

export default function PostForm() {
  const [message, setMessage] = useState(null)
  const [error, setError] = useState(null)

  async function handleSubmit(formData) {
    try {
      const result = await createPost(formData)
      setMessage(result.message)
      setError(null)
    } catch (e) {
      setError(e.message)
      setMessage(null)
    }
  }

  return (
    <div>
      <form action={handleSubmit}>
        {/* ... */}
      </form>
      {message && <p>{message}</p>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  )
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2NvbXBvbmVudHMvUG9zdEZvcm0uanMKJ3VzZSBjbGllbnQnCgppbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JwppbXBvcnQgeyBjcmVhdGVQb3N0IH0gZnJvbSAnLi4vYWN0aW9ucycKCmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIFBvc3RGb3JtKCkgewogIGNvbnN0IFttZXNzYWdlLCBzZXRNZXNzYWdlXSA9IHVzZVN0YXRlKG51bGwpCiAgY29uc3QgW2Vycm9yLCBzZXRFcnJvcl0gPSB1c2VTdGF0ZShudWxsKQoKICBhc3luYyBmdW5jdGlvbiBoYW5kbGVTdWJtaXQoZm9ybURhdGEpIHsKICAgIHRyeSB7CiAgICAgIGNvbnN0IHJlc3VsdCA9IGF3YWl0IGNyZWF0ZVBvc3QoZm9ybURhdGEpCiAgICAgIHNldE1lc3NhZ2UocmVzdWx0Lm1lc3NhZ2UpCiAgICAgIHNldEVycm9yKG51bGwpCiAgICB9IGNhdGNoIChlKSB7CiAgICAgIHNldEVycm9yKGUubWVzc2FnZSkKICAgICAgc2V0TWVzc2FnZShudWxsKQogICAgfQogIH0KCiAgcmV0dXJuICgKICAgIDxkaXY+CiAgICAgIDxmb3JtIGFjdGlvbj17aGFuZGxlU3VibWl0fT4KICAgICAgICB7LyogLi4uICovfQogICAgICA8L2Zvcm0+CiAgICAgIHttZXNzYWdlICYmIDxwPnttZXNzYWdlfTwvcD59CiAgICAgIHtlcnJvciAmJiA8cCBzdHlsZT17eyBjb2xvcjogJ3JlZCcgfX0+e2Vycm9yfTwvcD59CiAgICA8L2Rpdj4KICApCn0K"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>In diesem Beispiel:</p>

<ul>
  <li>Die <code>createPost</code>-Aktion löst einen Fehler aus, wenn der Titel weniger als 5 Zeichen lang ist.</li>
  <li>Die <code>PostForm</code>-Komponente verwendet einen <code>try...catch</code>-Block, um alle von der <code>createPost</code>-Aktion ausgelösten Fehler abzufangen.</li>
  <li>Wenn ein Fehler abgefangen wird, wird die Fehlermeldung dem Benutzer in einem <code><p></code>-Element mit rotem Text angezeigt.</li>
</ul>

<h2>Best Practices für die Verwendung von React Server Actions</h2>

<p>Um sicherzustellen, dass Sie Server Actions effektiv verwenden, beachten Sie die folgenden Best Practices:</p>

<h3>Verwenden Sie die <code>'use server'</code>-Direktive</h3>

<p>Fügen Sie immer die <code>'use server'</code>-Direktive am Anfang Ihrer Server Action-Dateien ein. Diese Direktive teilt dem React-Compiler mit, dass die Funktionen in der Datei auf dem Server ausgeführt werden sollen. Dies ist entscheidend für Sicherheit und Leistung.</p>

<h3>Halten Sie Aktionen klein und fokussiert</h3>

<p>Jede Server Action sollte eine einzelne, klar definierte Aufgabe ausführen. Dies macht Ihre Aktionen leichter verständlich, testbar und wartbar. Vermeiden Sie die Erstellung großer, monolithischer Aktionen, die mehrere nicht zusammenhängende Aufgaben ausführen.</p>

<h3>Validieren Sie Daten auf dem Server</h3>

<p>Validieren Sie Daten immer auf dem Server, bevor Sie Operationen durchführen. Dies schützt Ihre Anwendung vor ungültigen oder bösartigen Daten. Verwenden Sie geeignete Validierungstechniken wie Datentypvalidierung, Längenprüfungen und reguläre Ausdrücke. Die serverseitige Validierung ist sicherer als die clientseitige Validierung, die umgangen werden kann.</p>

<h3>Behandeln Sie Fehler ordnungsgemäß</h3>

<p>Behandeln Sie Fehler in Ihren Server Actions immer ordnungsgemäß. Dies verhindert, dass Ihre Anwendung abstürzt, und bietet eine bessere Benutzererfahrung. Verwenden Sie <code>try...catch</code>-Blöcke, um alle möglicherweise auftretenden Ausnahmen abzufangen und dem Benutzer informative Fehlermeldungen zu geben.</p>

<h3>Verwenden Sie optimistische Updates</h3>

<p>Verwenden Sie optimistische Updates, um die wahrgenommene Reaktionsfähigkeit Ihrer Anwendung zu verbessern. Aktualisieren Sie die Benutzeroberfläche sofort, um das erwartete Ergebnis einer Aktion widerzuspiegeln, noch bevor der Server die Änderung bestätigt hat. Wenn die serverseitige Operation fehlschlägt, können Sie die Benutzeroberfläche leicht in ihren vorherigen Zustand zurückversetzen.</p>

<h3>Berücksichtigen Sie Caching</h3>

<p>Erwägen Sie das Caching der Ergebnisse von Server Actions, um die Leistung zu verbessern. Dies kann besonders bei Aktionen von Vorteil sein, die aufwändige Operationen durchführen oder häufig aufgerufen werden. Verwenden Sie geeignete Caching-Strategien wie HTTP-Caching oder serverseitiges Caching, um die Last auf Ihrem Server zu reduzieren.</p>

<h3>Sichern Sie Ihre Server Actions</h3>

<p>Implementieren Sie Sicherheitsmaßnahmen, um Ihre Server Actions vor unbefugtem Zugriff und Manipulation zu schützen. Verwenden Sie Authentifizierung und Autorisierung, um sicherzustellen, dass nur autorisierte Benutzer bestimmte Aktionen ausführen können. Schützen Sie sich vor gängigen Sicherheitslücken wie Cross-Site-Scripting (XSS) und SQL-Injection. Bereinigen Sie immer Benutzereingaben, bevor Sie sie in Datenbankabfragen oder anderen sensiblen Operationen verwenden.</p>

<h2>Häufige Anwendungsfälle für React Server Actions</h2>

<p>Server Actions eignen sich gut für eine Vielzahl von Anwendungsfällen, darunter:</p>

<h3>Formularübermittlungen</h3>

<p>Die Handhabung von Formularübermittlungen ist einer der häufigsten Anwendungsfälle für Server Actions. Sie können Server Actions verwenden, um Formulardaten zu verarbeiten, Eingaben zu validieren und Daten in einer Datenbank zu speichern. Dies macht separate API-Endpunkte überflüssig und vereinfacht Ihren Entwicklungsworkflow. Zum Beispiel die Handhabung von Benutzerregistrierungen, Kontaktformularen oder Produktbewertungen.</p>

<h3>Datenmutationen</h3>

<p>Server Actions können verwendet werden, um Datenmutationen durchzuführen, wie z.B. das Erstellen, Aktualisieren oder Löschen von Daten in einer Datenbank. Dies ermöglicht es Ihnen, die Daten Ihrer Anwendung als Reaktion auf Benutzeraktionen zu aktualisieren. Beispiele sind das Aktualisieren von Benutzerprofilen, das Hinzufügen von Kommentaren oder das Löschen von Beiträgen.</p>

<h3>Authentifizierung und Autorisierung</h3>

<p>Server Actions können zur Handhabung von Authentifizierung und Autorisierung verwendet werden. Sie können Server Actions verwenden, um Benutzeranmeldeinformationen zu überprüfen, Tokens auszustellen und sensible Ressourcen zu schützen. Dies stellt sicher, dass nur autorisierte Benutzer auf bestimmte Teile Ihrer Anwendung zugreifen können. Zum Beispiel die Implementierung von Login-/Logout-Funktionen, die Verwaltung von Benutzerrollen oder die Autorisierung des Zugriffs auf bestimmte Funktionen.</p>

<h3>Echtzeit-Updates</h3>

<p>Obwohl Server Actions nicht von Natur aus in Echtzeit sind, können sie mit anderen Technologien wie WebSockets kombiniert werden, um Echtzeit-Updates für Ihre Anwendung bereitzustellen. Sie können Server Actions verwenden, um Ereignisse auszulösen, die dann über WebSockets an verbundene Clients gesendet werden. Denken Sie an Live-Chat-Anwendungen, kollaborative Dokumentenbearbeitung oder Echtzeit-Dashboards.</p>

<h2>Überlegungen zur Internationalisierung (i18n)</h2>

<p>Bei der Entwicklung von Anwendungen mit Server Actions für ein globales Publikum ist die Internationalisierung (i18n) von entscheidender Bedeutung. Hier sind einige wichtige Überlegungen:</p>

<h3>Lokalisierung von Fehlermeldungen</h3>

<p>Stellen Sie sicher, dass von Server Actions zurückgegebene Fehlermeldungen in die bevorzugte Sprache des Benutzers lokalisiert werden. Dies bietet eine bessere Benutzererfahrung und erleichtert es den Benutzern, Probleme zu verstehen und zu beheben. Verwenden Sie i18n-Bibliotheken, um Übersetzungen zu verwalten und Nachrichten dynamisch basierend auf der Ländereinstellung des Benutzers anzuzeigen.</p>

<h3>Datums- und Zahlenformatierung</h3>

<p>Formatieren Sie Datums- und Zahlenangaben entsprechend der Ländereinstellung des Benutzers. Unterschiedliche Ländereinstellungen haben unterschiedliche Konventionen für die Anzeige von Daten, Zahlen und Währungen. Verwenden Sie i18n-Bibliotheken, um diese Werte korrekt basierend auf der Ländereinstellung des Benutzers zu formatieren.</p>

<h3>Umgang mit Zeitzonen</h3>

<p>Achten Sie beim Umgang mit Datums- und Uhrzeitangaben auf Zeitzonen. Speichern Sie Datums- und Uhrzeitangaben im UTC-Format und konvertieren Sie sie bei der Anzeige in die lokale Zeitzone des Benutzers. Dies stellt sicher, dass Datums- und Uhrzeitangaben unabhängig vom Standort des Benutzers korrekt angezeigt werden. Zum Beispiel bei der Planung von Veranstaltungen oder der Anzeige von Zeitstempeln.</p>

<h3>Währungsumrechnung</h3>

<p>Wenn Ihre Anwendung mit Währungen arbeitet, stellen Sie eine Währungsumrechnungsfunktion bereit. Ermöglichen Sie es den Benutzern, Preise in ihrer lokalen Währung anzuzeigen. Verwenden Sie eine zuverlässige Währungsumrechnungs-API, um sicherzustellen, dass die Wechselkurse aktuell sind. Dies ist besonders wichtig für E-Commerce-Anwendungen und Finanzdienstleistungen.</p>

<h3>Unterstützung von Rechts-nach-Links (RTL)</h3>

<p>Wenn Ihre Anwendung Sprachen unterstützt, die von rechts nach links geschrieben werden (RTL), wie Arabisch oder Hebräisch, stellen Sie sicher, dass Ihre Benutzeroberfläche für diese Sprachen richtig gespiegelt wird. Dies umfasst das Spiegeln des Layouts, der Textrichtung und der Symbole. Verwenden Sie logische CSS-Eigenschaften, um Layouts zu erstellen, die sich an verschiedene Textrichtungen anpassen.</p>

<h2>Beispiele für React Server Actions in globalen Anwendungen</h2>

<p>Hier sind einige Beispiele, wie React Server Actions in globalen Anwendungen verwendet werden können:</p>

<h3>E-Commerce-Plattform</h3>

<ul>
  <li><b>Ein Produkt zum Warenkorb hinzufügen:</b> Eine Server Action kann verwendet werden, um ein Produkt zum Warenkorb des Benutzers hinzuzufügen. Die Aktion kann die Produkt-ID validieren, den Lagerbestand prüfen und den Warenkorb in der Datenbank aktualisieren.</li>
  <li><b>Eine Bestellung bearbeiten:</b> Eine Server Action kann verwendet werden, um eine Bestellung zu bearbeiten. Die Aktion kann die Zahlungsinformationen des Benutzers validieren, die Versandkosten berechnen und eine Bestellung in der Datenbank erstellen.</li>
  <li><b>Einen Newsletter abonnieren:</b> Eine Server Action kann Newsletter-Abonnements verwalten, E-Mail-Adressen validieren und sie zur Abonnementliste hinzufügen.</li>
</ul>

<h3>Social-Media-Plattform</h3>

<ul>
  <li><b>Einen Kommentar posten:</b> Eine Server Action kann verwendet werden, um einen Kommentar zu einem Beitrag zu posten. Die Aktion kann den Kommentartext validieren, ihn dem Beitrag zuordnen und in der Datenbank speichern.</li>
  <li><b>Einen Beitrag liken:</b> Eine Server Action kann verwendet werden, um einen Beitrag zu liken. Die Aktion kann die Anzahl der Likes für den Beitrag aktualisieren und den Like in der Datenbank speichern.</li>
  <li><b>Einem Benutzer folgen:</b> Server Actions können Folgeanfragen verwalten, das Blockieren von Benutzern handhaben und die Anzahl der Follower aktualisieren.</li>
</ul>

<h3>Reisebuchungsanwendung</h3>

<ul>
  <li><b>Nach Flügen suchen:</b> Server Actions können verwendet werden, um die Flugverfügbarkeit basierend auf Ziel und Daten abzufragen. Die Aktion kann externe APIs aufrufen, Ergebnisse filtern und dem Benutzer Optionen präsentieren.</li>
  <li><b>Ein Hotelzimmer reservieren:</b> Server Actions können Hotelbuchungen abwickeln, die Zimmerverfügbarkeit bestätigen und Zahlungsdetails verarbeiten.</li>
  <li><b>Reiseziele bewerten:</b> Eine Server Action kann das Hinzufügen und Verarbeiten von Benutzerbewertungen und -ratings übernehmen.</li>
</ul>

<h2>React Server Components vs. Server Actions</h2>

<p>Es ist wichtig, den Unterschied zwischen React Server Components und Server Actions zu verstehen, da sie oft zusammenarbeiten, aber unterschiedliche Zwecke erfüllen:</p>

<h3>React Server Components</h3>

<p>React Server Components sind Komponenten, die auf dem Server gerendert werden. Sie ermöglichen es Ihnen, Daten abzurufen, Logik auszuführen und UI-Elemente auf dem Server zu rendern, was die Leistung verbessern und die Menge an JavaScript reduzieren kann, die auf dem Client heruntergeladen und ausgeführt werden muss. Server Components dienen hauptsächlich dem Rendern der Benutzeroberfläche und dem Abrufen von Anfangsdaten.</p>

<h3>Server Actions</h3>

<p>Server Actions sind asynchrone Funktionen, die als Reaktion auf Benutzerinteraktionen, wie z.B. Formularübermittlungen, auf dem Server ausgeführt werden. Sie dienen hauptsächlich der Handhabung von Datenmutationen, der Ausführung serverseitiger Logik und der Bereitstellung von Feedback für den Benutzer. Server Actions werden von Client-Komponenten aufgerufen, typischerweise als Reaktion auf Formularübermittlungen oder andere Benutzerereignisse.</p>

<p><b>Wesentliche Unterschiede:</b></p>

<ul>
  <li><b>Zweck:</b> Server Components dienen dem Rendern der Benutzeroberfläche, während Server Actions für die Handhabung von Datenmutationen zuständig sind.</li>
  <li><b>Ausführung:</b> Server Components werden beim initialen Laden der Seite auf dem Server gerendert, während Server Actions von Client-Komponenten als Reaktion auf Benutzerinteraktionen aufgerufen werden.</li>
  <li><b>Datenfluss:</b> Server Components können Daten direkt vom Server abrufen, während Server Actions Daten vom Client über Formularübermittlungen oder andere Benutzerereignisse erhalten.</li>
</ul>

<p><b>Wie sie zusammenarbeiten:</b></p>

<p>Server Components und Server Actions können zusammen verwendet werden, um interaktive Webanwendungen zu erstellen. Server Components können die anfängliche Benutzeroberfläche rendern und die Anfangsdaten abrufen, während Server Actions Datenmutationen handhaben und dem Benutzer Feedback geben können. Zum Beispiel könnte eine Server Component ein Formular rendern, und eine Server Action könnte die Formularübermittlung handhaben und die Daten in der Datenbank aktualisieren.</p>

<h2>Fazit</h2>

<p>React Server Actions bieten eine leistungsstarke und effiziente Möglichkeit, Formularverarbeitung, Datenmutationen und andere serverseitige Operationen in Ihren React-Anwendungen zu handhaben. Durch die Nutzung von Server Actions können Sie Ihren Entwicklungsworkflow vereinfachen, die Anwendungsleistung verbessern, die Sicherheit erhöhen und eine bessere Benutzererfahrung bieten. Mit zunehmender Komplexität von Webanwendungen wird das Verständnis und die Nutzung von React Server Actions zu einer wesentlichen Fähigkeit für moderne React-Entwickler.</p>

<p>Denken Sie daran, die in diesem Leitfaden beschriebenen Best Practices zu befolgen, um sicherzustellen, dass Sie Server Actions effektiv und sicher verwenden. Indem Sie Server Actions einsetzen, können Sie das volle Potenzial von React ausschöpfen und hochleistungsfähige, benutzerfreundliche Webanwendungen für ein globales Publikum erstellen.</p>
</div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React Server Actions</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Server-Komponenten</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Formularverarbeitung</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">serverseitiges Rendering</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Datenmutationen</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React-Framework</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Webentwicklung</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Datenabruf</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Server-Integration</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">progressive Verbesserung</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div hidden id="S:3"></div><script>$RC("B:3","S:3")</script><div hidden id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>